<%@page import="com.zpyr.common.StringUtil"%>
<%@page import="com.zpyr.mvc.vo.Home_memo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	List<Home_memo> list = (List<Home_memo>) request.getAttribute("list");
	int tCount = StringUtil.nvlInt( request.getAttribute("count") ); // 전체 게시물 갯수
	int listNum = StringUtil.nvlInt( request.getAttribute("listNum") ); // 현재 보여지는 게시물 갯수
%>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/home/memo.css">
<script type="text/javascript">
	var titleDefStr = '제목을 입력하세용.';
	var memoDefStr = '내용을 입력하세용.';
	
	viewMemo = function(memo_seq) {
		var url = '/home/memo/viewer.zpr';
		var params = {'memo_seq' : memo_seq};
		$.post(url , params , function(data){
			$('#memo_viewer').show();
			$('#memo_viewer').html(data);
		});
	};
	
	// 게시물 더 보기 버튼 설정.
	moreBtnDef = function() {
		var tc = <%=tCount%>;
		var lc = $('#memo_list_count').val();
		
		if( parseInt(tc) <= parseInt(lc) ) {
			$('#memo_more').hide();	
		}
		else {
			$('#memo_more').show();
		}
	};
	
	
	// 인풋박스 기본값 적용.
	var inputDef = function() {
		var $form = $('#memo_editor_wrap form');
		
		var title = $form.find('[name=title]');
		var memo  = $form.find('[name=memo]');
		
		if(title.val() == '') {
			title.val(titleDefStr);
			title.css('color' , 'gray');
		}
		else title.css('color' , 'black');
		
		title.focus(function(){
			if( $(this).val() == titleDefStr ) {
				title.val('');
				title.css('color' , 'black');
			}
		});
		title.blur(function(){
			if( $(this).val() == '' ) {
				title.val(titleDefStr);
				title.css('color' , 'gray');
			}
		});

		if(memo.val() == '') {
			memo.val(memoDefStr);
			memo.css('color' , 'gray');
		}
		else memo.css('color' , 'black');
		
		memo.focus(function(){
			if( $(this).val() == memoDefStr ) {
				memo.val('');
				memo.css('color' , 'black');
			}
		});
		memo.blur(function(){
			if( $(this).val() == '' ) {
				memo.val(memoDefStr);
				memo.css('color' , 'gray');
			}
		});
	}
	
	$(document).ready(function(){
		console.log('$start_memo_main');
		
		var $form = $('#memo_editor_wrap form');
		moreBtnDef();
		inputDef();
		
		
		$('#memo_cancel_btn').click(function(){
		//	myHistory.go('memo');
			$form.get(0).reset();
			inputDef();
		});
		$('#memo_save_btn').click(function(){
			var title = $form.find('[name=title]').val();
			var memo = $form.find('[name=memo]').val();
			
			if(!title || title == titleDefStr) {
				alert(titleDefStr);
				return;
			}
			if(!memo || memo == memoDefStr) {
				alert(memoDefStr);
				return;
			}
			
			$.post("/home/memo/insert.zpr" , {'memo' : memo , 'title' : title} , function(data){
				if(data == 1) {
					//success
					myHistory.go('memo');
				}
				else {
					
				}
			});
		});
		
		$('#memo_more_btn').click(function(){
			var url = '/home/memo/select.zpr';
			var params = { cur : $('#memo_list_count').val() , num : '<%=listNum%>' };
			
			com.zpyr.data.GetData.set( url , params );
			var xml = com.zpyr.data.GetData.xml();
			
			$(xml).find('item').each(function(){
				var tr = $('<tr>');
				tr.html( '<th><input type="checkbox" name="memo_sel" value="' + $(this).find('memo_seq').text() + '" /></th>' +
						 '<td>'+ $(this).find('date_ymd').text() +'</td>' + 
						 '<td class="memo_title_clickable" id="memo_title'+ $(this).find('memo_seq').text() +'" >'+ $(this).find('title').text() +'</td>');
				
				$('#memo_list_wrap tbody').append(tr);
			});
			
			$('#memo_list_count').val( parseInt($('#memo_list_count').val(),10) + <%=listNum%> );
			
			moreBtnDef();
		});
		
		$('#memo_del_btn').click(function(){
			var memo_seqs = '';
			$(':checkbox[name=memo_sel]:checked').each(function(){
				var memo_seq = $(this).val();
				memo_seqs += '#'+memo_seq;
			});

			if(memo_seqs == '') {
				alert('삭제할 메모를 선택하시오.');
				return;
			}
			var url = '/home/memo/delete.zpr';
			var params = { 'memo_seqs' : memo_seqs };
			
			$.post(url , params , function(data) {
				if(data >= 1) {
					//success
				}
				else {
					// 삭제실패
				}
				myHistory.go('memo');
			});
		});
		
		$('#memo_check_all').click(function(){
			var checkedLen = $(':checkbox[name=memo_sel]:checked').size();
			if( checkedLen == <%=tCount%> ) {
				$(':checkbox[name=memo_sel]').removeAttr('checked');
			}
			else {
				$(':checkbox[name=memo_sel]').attr('checked' , 'checked');
			}
		});
		
		$('.memo_title_clickable').click(function(){
			
			var $this = $(this);
			var memo_seq = $this.attr('id').replace('memo_title' , '');
			
			viewMemo(memo_seq);
			
		});
		
		var dd = new com.zpyr.web.DragDrop(1);
		dd.addDragELement('memo_viewer_panel', 'th[name=memo_drag_handler]');
		dd.addDropTarget('memo_drop_target' , $(document));
		dd.run();
	});
	
</script>
</head>
<body>
	<div id='memo_editor'>
		<div id='memo_editor_wrap'>
			<div>
			<form>
			<span><input type='text' name='title' /></span>
			<span><textarea name='memo'></textarea></span>
			<span>
			<a href='javascript:;' class='txt_blue_btn' id='memo_save_btn'>저장</a>&nbsp;&nbsp;
			<a href='javascript:;' class='txt_blue_btn' id='memo_cancel_btn'>취소</a></span>
			</form>
			</div>
		</div>
	</div>
	<div id='memo_list'>
		<div id='memo_list_wrap' class='tb1'>
		<table>
		<colgroup>
		<col width="10%" />
		<col width="20%" />
		<col width="70%" />
		</colgroup>
		<thead>
		<tr>
		<th colspan='3'>
		<span style='float:left; margin-left:4px;' >TOTAL : <label class='txt_blue'><%=tCount %><input type='hidden' value='<%=listNum %>' id='memo_list_count' /></label></span>
		<span style='float:right; margin-right:4px;' ><a href='javascript:;' class='txt_blue_btn' id='memo_del_btn'>삭제</a></span>
		</th>
		</tr>
		<tr>
		<th><label class='txt_blue' id='memo_check_all'>선택</label></th>
		<th>기록일</th>
		<th>메모제목</th>
		</tr>
		</thead>
		<tbody>
<%
	if(list != null) {
		for( Home_memo hm : list ) {
%>		
		<tr>
		<th>
		<input type='checkbox' name='memo_sel' value='<%=hm.getMemo_seq() %>' />
		</th>
		<td><%=hm.getDate_ymd() %></td>
		<td class='memo_title_clickable' id='memo_title<%=hm.getMemo_seq()%>' ><%=hm.getTitle() %></td>
		</tr>
<%		
		}
	}
%>		
		</tbody>
		<tfoot id='memo_more'>
		<tr>
		<th colspan='3'><a href='javascript:;' class='txt_blue_btn' id='memo_more_btn'>더 보기...</a></th>
		</tr>
		</tfoot>
		</table>
		</div>
	</div>
	
	<div id="memo_viewer_panel" style="position:absolute; top:350px; left: 100px; z-index: 99; background: #fefefe">
		<div id="memo_viewer" class="tb1" style="width:500px; overflow-y: auto; display:none; ">
		</div>
	</div>
</body>
</html>